<!DOCTYPE html>
<html>
  <head>

    <title>Raspberry Pi Cam</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/styles/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="static/styles/main.css" type="text/css">

  </head>
  <body>

    <div class="panel panel-default">
      <div class="panel-heading">
        <span>Stats</span><a href="javascript:window.location.href=window.location.href" class="pull-right">Refresh</a>
      </div>
      <table class="table">
        <tr>
          <td>Server timestamp: </td>
          <td>{{ timestamp }}</td>
        </tr>
        <tr>
          <td>Javascript timestamp: </td>
          <td><script>document.write(new Date().toLocaleString())</script></td>
        </tr>
        <tr>
          <td>Latest image: </td>
          <td>{{ images[0] }}</td>
        </tr>
        <tr>
          <td>Images taken: </td>
          <td>{{ total_image_count }}</td>
        </tr>
      </table>
    </div>

    <div>
      {% for image in images %}
      <div class="thumbnail" data-image="{{ image }}">
        <button type="button" class="btn btn-danger">&#10006;</button>
        <button type="button" class="btn btn-default">{{ image }}</button>
        <img src="{{ image }}" />
      </div>
      {% endfor %}
    </div>

    <script src="static/scripts/jquery.js"></script>
    <script src="static/scripts/bootstrap.js"></script>
    <script src="static/scripts/main.js"></script>
  </body>
</html>
